<template>
    <div>
        <input type="text" v-model="formData.age" @input="handleFormChange">
        <input type="text" v-model="formData.name" @input="handleFormChange">
        <p>age: {{ formData.age }}</p>
        <p>name: {{ formData.name }}</p>
        <p>fullInfo: {{ formData.fullInfo }}</p>
        <p>count: {{ count }}</p>
        <p @click="handleChange">changeCount</p>
    </div>
</template>

<script setup>
import { inject } from 'vue';

const { formData, updateFormData } = inject('formData');
const { count, updateCount } = inject('count');

const handleChange = () => {
    const num = Number((Math.random() * 100).toFixed(0));
    updateCount(num)
};

const handleFormChange = () => {
    const fullInfo = `${formData.name}, ${formData.age}`;
    updateFormData('fullInfo', fullInfo);
};
</script>

<style lang="scss" scoped>

</style>